<template>
  <div ref="wrapper">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import BScroll from 'better-scroll'
export default {
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    postiony: {
      type: Number,
      default: 1000
    },
    pullupload: {
      type: Boolean,
      default: false
    },
    offsettop: {
      type: Number,
      default: 1000
    }
  },
  setup(props, _) {
    const scorll = ref(null)
    const wrapper = ref(null)
    const isshowback = ref(false)
    const isfixed = ref(false)
    onMounted(() => {
      nextTick(() => {
        scorll.value = new BScroll(wrapper.value, {
          click: true,
          probeType: props.probeType,
          pullUpLoad: props.pullupload,
          observeDOM: true, // 开启 observe-dom 插件
          observeImage: {
            debounceTime: 100 // ms
          }
        })
        // 监听滚动
        scorll.value.on('scroll', (postion) => {
          ;-postion.y > props.postiony ? (isshowback.value = true) : (isshowback.value = false)
          ;-postion.y > props.offsettop ? (isfixed.value = true) : (isfixed.value = false)
          _.emit('handlescroll', -postion.y)
        })
        // 监听上拉加载更多
        scorll.value.on('scrollEnd', () => {
          _.emit('pullloadmore')
        })
      })
    })

    return {
      wrapper,
      scorll,
      isshowback,
      isfixed
    }
  }
}
</script>

<style scoped></style>
